<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animated Header</title>
<style type="text/css" media="screen">
    
    body{
        background-color: #000;
    }

    /* Give the header a height and a background image */
    #header{
        height:145px; 
        background: #000 url(images/headerbackground.jpg) repeat-y scroll left top;
        text-align:center;
    }
    
    /* Create a Shadow Overlay */ 
    #header div{
        width:760px;
        height:145px;
        
    }
    
    /* Vertically position header text and style it*/
    #header h1{
        padding-top:20px;
        font-family: Arial, "MS Trebuchet", sans-serif;
        color:white;
		font-size:100px
    }
    
    /* Give basic styles to the body and the navigation */
    #body{
        background-color:#efefef;
        height:500px;
    }
    #nav{
        height:35px;
        background-color: #111;
    }
    
</style>

</head>

<body>
    


    <div id="header">
        
        <div>
            <h1>Pics</h1> 
        </div>  
    </div>

</body>     

<!-- Import jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

    var scrollSpeed = 100;       // Speed in milliseconds
    var step = 1;               // How many pixels to move per step
    var current = 0;            // The current pixel row
    var imageHeight = 1500;     // Background image height
    var headerHeight = 145;     // How tall the header is.
    
    //The pixel row where to start a new loop
    var restartPosition = -(imageHeight - headerHeight);
    
    function scrollBg(){
        
        //Go to next pixel row.
        current -= step;
        
        //If at the end of the image, then go to the top.
        if (current == restartPosition){
            current = 0;
        }
        
        //Set the CSS of the header.
        $('#header').css("background-position","0 "+current+"px");
        
        
    }
    
    //Calls the scrolling function repeatedly
    var init = setInterval("scrollBg()", scrollSpeed);
    
</script>   

</html>